import React, { Component } from 'react'
import { Icon } from 'antd-mobile'

export default class PaymentPage extends Component {
  render() {
    return (
      <div className={`rt-payment-page-container`}>
        <div className={`rt-top`}>
          <Icon type="left" />
          <span>扫码支付</span>
        </div>

        <div className={`rt-scrollable-box`}>
          <div className={`rt-current-account`}>当前账户 131****1234</div>

          <div className={`rt-pay-amount`}>
            <span className={`rt-text`}>支付金额</span>
            <span><span>11</span> 元</span>
          </div>
          <div className={`rt-img-box`}>
            <img alt="qr-code" src={require('static/images/qr-code.png')} />
          </div>
          <div className={`rt-procedure-box`}>
            <div className={`rt-left`}>
              <span className={`rt-sequence`}>1</span>
              <span className={`rt-sequence`}>2</span>
            </div>
            <div className={`rt-right`}>
              <span>长按二维码，选择“识别图中二维码”</span>
              <span>完成支付后，点击下方“我已支付完成”</span>
            </div>
          </div>
          
          <div className={`rt-main-button`}>我已支付完成</div>
          <div className={`rt-main-button rt-another-state`}>取 消</div>
        </div>

      </div>
    )
  }
}